<!DOCTYPE html>
<html>
<head>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传下载预览demo界面</title>
</head>
<body>
    <form action="/upload" enctype="multipart/form-data" method="post">
        <input  name="files" type="file" multiple="multiple" value="请选择多个文件"/>
        <button type="submit">文件上传</button>
    </form>
    <div id="fileNameDiv">
    </div>
</body>
</html>
</body>
<script type="text/javascript" src="/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
fileNameList = [];
function getFileList(){
  $.ajax({
    type:"get",
    url:"/getFileList",
    async:false,
    success:function(response){fileNameList = response;},
    error:function(){fileNameList = [];}
  })
}
getFileList();
for(i=0;i<fileNameList.length;i++){
  fileName = fileNameList[i];
  fileNameEncode = encodeURI(fileName)
  fileNameEncode = fileNameEncode.replace(/\+/g,'%2B');
  hrefPreview = `/preview?fileName=${fileNameEncode}`;
  hrefDelete = `/delete?fileName=${fileNameEncode}`;
  hrefDownload = `/download?fileName=${fileNameEncode}`;
  console.log(fileNameEncode);
  $("#fileNameDiv").append(
    `
    <a href=${hrefDelete}>删除</a> <a href=${hrefDownload}>下载</a>  <a href=${hrefPreview}>${fileName}</a> <br>
    `
  )
}
</script>
</html>